<!DOCTYPE html>
<html>
<head>
    <title>热榜词云</title>

    <!-- meta -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- css -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/pace.css">
    <link rel="stylesheet" href="css/custom.css">
    <link rel="stylesheet" href="css/hot.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/ionicons/2.0.1/css/ionicons.min.css">

    <!-- js -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/pace.min.js"></script>
    <script src="js/blog/globalConfig.js"></script>
    <script src="js/modernizr.custom.js"></script>
    <script src="js/echarts.simple.js"></script>
    <script src="js/echarts-wordcloud.js"></script>
    <style>

        a:link {
            color:black;
            text-decoration:none;
        }
        a:visited {
            color:black;
            text-decoration:none;
        }
        a:hover {
            color:#000000;
            text-decoration:underline;
        }
        a:active {
            color:black;
            text-decoration:none;
        }
        #right-menu{
            position: absolute;
            background-color: #fff1f1;
            width: 200px;
            height: auto;
            border: 1px #ccc solid;
            display: none;
            padding:2px 0;
            box-shadow: 5px 5px 5px #ccc;
        }
        .menu-item{
            height: 25px;
            margin:4px 0;
            padding:0 10px;
            cursor: pointer;
        }
        .menu-item:hover{
            background-color: #ccc;
        }
        .menu-item-separator{
            border-top:1px #ccc solid;
            height: 1px;
        }

    </style>
</head>

<body id="page">
<div class="container" >

</div>

<div  id="right-menu">
    <div class="menu-item">执行</div>
    <div class="menu-item">启动</div>
    <div class="menu-item-separator"></div>
    <div class="menu-item">删除</div>
    <div class="menu-item">导出</div>
</div>



<div class="content-body">
    <div class="container">
        <div class="row">
            <main class="col-md-12">


                <div id="main" style="width: 800px; height: 600px"></div>
                <script>




                    var aaa = function (dada) {
                        var data = dada
                        var myChart = echarts.init(document.getElementById('main'));
                        //温馨提示：image 选取有严格要求不可过大；，否则firefox不兼容  iconfont上面的图标可以
                        var maskImage = new Image();
                        maskImage.src = data.image

                        maskImage.onload = function(){
                            myChart.setOption( {
                                backgroundColor:'#fff',
                                tooltip: {
                                    show: false
                                },
                                series: [{
                                    type: 'wordCloud',
                                    gridSize: 1,
                                    sizeRange: [12, 55],
                                    rotationRange: [-45, 0, 45, 90],
                                    maskImage: maskImage,
                                    textStyle: {
                                        normal: {
                                            color: function() {
                                                return 'rgb(' +
                                                    Math.round(Math.random() * 255) +
                                                    ', ' + Math.round(Math.random() * 255) +
                                                    ', ' + Math.round(Math.random() * 255) + ')'
                                            }
                                        }
                                    },
                                    left: 'center',
                                    top: 'center',
                                    // width: '96%',
                                    // height: '100%',
                                    right: null,
                                    bottom: null,
                                    // width: 300,
                                    // height: 200,
                                    // top: 20,
                                    data: data.value
                                }]
                            })
                        }

                    };



                    $(document).ready(function(){
                            htmlobj=$.ajax({url:"/list/ciyun",async:false});
                            console.log(htmlobj.responseJSON.Data)

                            var data = {
                                value:htmlobj.responseJSON.Data,
                                //小鸟图片
                                image: ""
                            }
                            var x = aaa(data)
                    });

 </script>





                <div id="divTb" style="
    position: absolute;
    overflow: auto;
    width: 500px;
    height: 500px;
    cursor: default;
    /* float: right; */
    right: 10px;
    top: 100px;
">
                    <table id="myTb" style=" width:100%"  class="table table-striped">
                        <caption>今天热潮布局</caption>
                        <thead>
                        <tr>
                            <th>关键词</th>
                            <th>热量</th>
                            <th>查看</th>
                        </tr>
                        </thead>
                    </table>

                </div>


                <!-- 模态框（Modal） -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    &times;
                                </button>
                                <h4 class="modal-title" id="myModalLabel">
                                    弹框
                                </h4>
                            </div>
                            <div class="modal-body">
                                <table id="detailTb" style=" width:100%"  class="table table-striped">
                                    <caption>详情</caption>
                                    <thead>
                                    <tr>
                                        <th>标题</th>
                                        <th>链接</th>
                                    </tr>
                                    </thead>
                                </table>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                </button>
                                <button type="button" class="btn btn-primary">
                                    可以
                                </button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal -->
                </div>


                <script type="text/javascript">
                    //获取发布模块类型
                    function getModuleInfo() {
                        $.ajax({
                            type: "GET",
                            dataType: "json",
                            url: "/list/ciyun",
                            //data: { id: id, name: name },
                            success: function(json) {
                                var typeData = json.Data;
                                $.each(typeData, function(i, n) {
                                    var tbBody = ""
                                    var trColor;
                                    if (i % 2 == 0) {
                                        trColor = "even";
                                    }
                                    else {
                                        trColor = "odd";
                                    }
                                    tbBody += "<tr class='" + trColor + "'><td>" + n.name + "</td>" + "<td>" + n.value + "</td>" + "<td><table class='bbb'></table><button class=\"btn btn-primary btn-lg\"  data-toggle=\"modal\" data-target=\"#myModal\" onclick=\"fetch('"+ n.GroupConcatID +"'  )\" >查看 </button></td></tr>";
                                    $("#myTb").append(tbBody);
                                });
                            },
                            error: function(json) {
                                alert("加载失败");
                            }
                        });
                    }
                    $(function() {
                        getModuleInfo();
                    });



                    function fetch(from_id) {
                        that = this
                        $.ajax({
                            type: "GET",
                            dataType: "json",
                            url: "/list/detail?from_id="+from_id,
                            //data: { id: id, name: name },
                            success: function(json) {
                                $("#detailTb").empty();
                                var typeData = json.Data;
                                $.each(typeData, function(i, n) {
                                    var tbBody = ""
                                    var trColor;
                                    if (i % 2 == 0) {
                                        trColor = "even";
                                    }
                                    else {
                                        trColor = "odd";
                                    }
                                    tbBody += "<tr class='" + trColor + "'><td>" + n.Title + "</td>" + "<td><a target='_blank' href=\"" + n.SUrl + "\">点击链接</a></td> </tr>";
                                    $("#detailTb").append(tbBody);
                                });
                            },
                            error: function(json) {
                                alert("加载失败");
                            }
                        });
                    }
                </script>


            </main>
        </div>
    </div>
</div>
<footer id="site-footer">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="text-center text-muted">
                    <div class="copyright">
                        <small>:copyright: 2018 梁达标先生的持久战. All Rights Reserved.</small>
                        <small class="license mt-2">Theme Dobby Made By Vtrois.</small>
                    </div>
                    <div class="miitbeian mt-2">
                        <small class="mx-1 text-muted"><a href="http://www.miitbeian.gov.cn/" rel="external nofollow" target="_blank">粤ICP备13080967号-1</a></small>
                        <small class="mx-1 text-muted"><a href="https://www.beian.gov.cn" rel="external nofollow" target="_blank">公安备案号 44070502000247</a></small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>

<!-- Mobile Menu -->
<div class="overlay overlay-hugeinc">
    <button type="button" class="overlay-close"><span class="ion-ios-close-empty"></span></button>
    <nav>
        <ul>
            <li><a href="index.html" >Home</a></li>
            <li><a href="hot.html" >News</a></li>
            <li><a href="mine.html" >Daily</a></li>
            <li><a href="about.html" >About</a></li>
            <li><a href="contact.html" >Contact</a></li>
        </ul>
    </nav>
</div>
<!--<script>-->
<!--    window.oncontextmenu = function(e){-->
<!--        e.preventDefault(); //阻止浏览器自带的右键菜单显示-->
<!--        var menu = document.getElementById("right-menu");-->
<!--        menu.style.display = "block"; //将自定义的“右键菜单”显示出来-->
<!--        menu.style.left = e.clientX + "px";  //设置位置，跟随鼠标-->
<!--        menu.style.top = e.clientY+"px";-->
<!--    }-->
<!--    window.onclick = function(e){ //点击窗口，右键菜单隐藏-->
<!--        var menu = document.getElementById("right-menu");-->
<!--        menu.style.display = "none";-->
<!--    }-->

<!--</script>-->
<script src="js/script.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/layer/2.3/layer.js"></script>
<script src="https://cdn.jsdelivr.net/gh//timeromantic/static@1.0/js/2D/L2Dwidget.1.min.js.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/layer/2.3/layer.js"></script>
<div id="live2d-widget"><canvas id="live2dcanvas" width="200" height="400" style="position: fixed; opacity: 0.7; left: 0px; bottom: -20px; z-index: 99999; pointer-events: none;"></canvas></div>
</body>

<a id="allShow" target="_blank" onclick="AllShowDo()" onmouseover="AllShow()"  class="btn btn-default"  role="button" style="position:fixed;right:10px;bottom:130px">
    <span id="iconAllShow" class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</a>

<a id="feedBackMine" target="_blank" onmouseover="feedback()"  class="btn btn-default" href="https://www.printf520.com/single.html?id=65" role="button" style="position:fixed;right:10px;bottom:90px">
    <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
</a>

<a id="openGirl"  onmouseover="noticeOpenGirl()" onclick="openGirl()" class="btn btn-default" href="#" role="button" style="position:fixed;right:10px;bottom:50px">
    <span class="glyphicon glyphicon-grain" aria-hidden="true"></span>
</a>


<a class="btn btn-default" href="#" role="button" style="position:fixed;right:10px;bottom:10px">
    <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
</a>
</body>
</html>
